<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的推广</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

    <style>
        .header {
            background: #f5d94c;
        }
    </style>
</head>
<body>
<div id="blank" class="header" style="border:none" v-cloak>
    <div id="back" v-back.tapmode class="back"></div>
    <span class="title">我的推广</span>
    <span v-open-win.tapmode vurl="shareQrcode" style="position:absolute;right:15px;font-size:14px;">分享二维码</span>
</div>
<div id="app" class="main-container" v-cloak>
    <div class="mypromotion-top" :class="BSImg">
        <img :src="qrcode">
        <p>我的邀请码: {{invite_code}}</p>
    </div>
    <div class="mypromotion-middle">
        <div>
            <p>直属推广总人数(人)</p>
            <p>{{direct_extend_count}}</p>
        </div>
        <div>
            <p>推广总人数</p>
            <p>{{all_extend_count}}</p>
        </div>
        <div>
            <p>直属推广总收益</p>
            <p>{{direct_extend_profit}}</p>
        </div>
        <div>
            <p>推广总收益(元)</p>
            <p>{{all_extend_profit}}</p>
        </div>
    </div>
    <div class="mypromotion-listText">
        <img class="mypromotion-listText-bg" v-src="'../../image/home_icon_tuijianleft.png'">
        <span>推广会员列表</span>
        <img class="mypromotion-listText-bg" v-src="'../../image/home_icon_tuijianright.png'">
    </div>
    <div class="mypromotion-bottom">
        <div class="mypromotion-member-single" v-for="extendMember in extendMembers">
            <img :src="extendMember.portrait ? extendMember.portrait : '../../image/portrait_moren.png'">
            <span>
                <p>
                    <span>{{extendMember.nickname}} </span><span>({{extendMember.level_name}})</span>
                </p>
                <p>本月自消费(元): {{extendMember.consume}}</p>
            </span>
            <span :style="getStyle(extendMember.is_consume_satisfied)">{{getText(extendMember.is_consume_satisfied)}}</span>
        </div>
    </div>
    <lazy-load
          style="margin:10px 0"
          v-if="extendMembers.length > 0"
          count-per-page="20"
          :arr="extendMembers"
          :url="url"
          ret-attr="extendMembers"
    ></lazy-load>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>

    var invite_code,
        direct_extend_count,
        all_extend_count,
        direct_extend_profit,
        all_extend_profit,
        extendMembers,
        scanner;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        showProgress();

        scanner = api.require('FNScanner');
        getInfos();

        addListeners();
    };

    function getInfos() {
        var data = {
            member_id: getPrefs('member_id'),
        };
        var callback = function (ret) {
            var data = ret.content;
            invite_code = data.invite_code;
            direct_extend_count = data.direct_extend_count;
            all_extend_count = data.all_extend_count;
            direct_extend_profit = data.direct_extend_profit;
            all_extend_profit = data.all_extend_profit;
            extendMembers = data.extendMembers;
            encodeImg(data.qrcode);
        };
        pinet.post(URL.myExtend, data, callback);
    }

    function encodeImg(qrcode) {
        scanner.encodeImg({
            content: qrcode,
            saveImg: {
                path: 'fs://qrcode.png',
                w: 400,
                h: 400,
            }
        }, function (ret) {
            if (ret.status) {
                initApp(ret.imgPath);
            }
        })
    }

    function initApp(qrcode) {
        new Vue({
            el: '#app',
            data: {
                qrcode: qrcode,
                invite_code: invite_code,
                direct_extend_count: direct_extend_count,
                all_extend_count: all_extend_count,
                direct_extend_profit: direct_extend_profit,
                all_extend_profit: all_extend_profit,
                extendMembers: extendMembers,
                url:URL.myExtend,
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small'
                }
            },
            methods: {
                getStyle: function (is_consume_satisfied) {
                    return {
                        color: is_consume_satisfied == '0' ? '#f33736' : '#349e20'
                    }
                },
                getText: function (is_consume_satisfied) {
                    return is_consume_satisfied == '0' ? '不达标' : '达标'
                }
            }
        });
        api.parseTapmode();
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }
</script>
</html>
